<template>
	<view class="content">

		<view class="a-c" style="margin-top: 30px;width: 100%;">
			<newMsg :scrollable="true" :text="msgTxt2"></newMsg>
			<newMsg ref='myNewMsg' @close='close' :scrollable="msgTxt.length > 18" :text="msgTxt" backgroundColor='#F9BDBD'
			 color='#CF1D00' icon='iconjinggao'></newMsg>
		</view>
		<image class="logo" src="/static/logo.png"></image>

		<view class="text-area">
			<view style="margin-bottom: 100rpx;">
				<myBtn @myclick="myclick8()" ref='myBtn' :title="'级联'" type="warning" :borderShow='true'></myBtn>
			</view>
			<view style="margin-bottom: 100rpx;">
				<myBtn @myclick="myclick6()" ref='myBtn' :title="'下边弹框'" type="warning"></myBtn>
			</view>
			<view style="margin-bottom: 100rpx;">
				<myBtn @myclick="myclick()" ref='myBtn' :title="'中间弹框'" type="warning" :borderShow='true'></myBtn>
			</view>
			<view style="margin-bottom: 100rpx;">
				<myBtn @myclick="myclick2()" ref='myBtn' :title="'确定选择'" type="success"></myBtn>
			</view>
			<view style="margin-bottom: 100rpx;">
				<myBtn @myclick="myclick3()" ref='myBtn' :title="'确定选择'" type="danger"></myBtn>
			</view>
			<view style="margin-bottom: 100rpx;">
				<myBtn @myclick="myclick4()" ref='myBtn' :title="'确定选择'" :backColor="'#386FCF'"></myBtn>
			</view>
			<view style="margin-bottom: 100rpx; display: flex;justify-content: space-around;">
				<mySwitch @change="handChan" :value="true"></mySwitch>
				<mySwitch @change="handChan" :value="false"></mySwitch>
			</view>
			<view style="margin-bottom: 100rpx; display: flex;justify-content: space-between;">
				<myTag :title="'小标'" :backcolor="'#2AA845'"></myTag>
				<myTag :title="'小标'" :backcolor="'#FFB047'"></myTag>
				<myTag :title="'大大标'" :backcolor="'#386FCF'"></myTag>
				<myTag :title="'小标'" :backcolor="'#CF4238'"></myTag>
			</view>
			<view style="margin-bottom: 100rpx; display: flex;justify-content: space-around;">
				<!-- <myMsg :isShow='msgShow' :title="'警告，没有下次机会'" :iconFont="'icon-xin'" :backcolor="'#386FCF'"></myMsg> -->
			</view>

			<view style="margin-bottom: 100rpx; display: flex;justify-content: space-around;">
				<myYes></myYes>
				<myYes :backcolor="'#386FCF'" icon='iconduihao4'></myYes>
				<myYes :backcolor="'#FFB730'" icon='iconduihao3'></myYes>
				<myYes :backcolor="'#2AA845'" icon='iconduihao2'></myYes>
				<myYes :backcolor="'#CF4238'"></myYes>
			</view>
		</view>
		<view style="margin-bottom: 100rpx; display: flex;justify-content: space-around;">
			<myMsg ref="mpopup" :isdistance="true"></myMsg>
		</view>
		<view class="">
			<popUp @myClick="myClick" ref="popup" type="center" title='这是传递的标题' :showFun='true' :showTitle='false'>
				<view class="pro_title">
					内容内容内容内容内容内容内容内容内容
				</view>
				<view style="text-align: center;">
					<image src="../imgs/youhuiquan.png" mode="" style="margin-top: 50rpx;width: 394rpx;text-align: center;"></image>
				</view>
			</popUp>
		</view>
		<view class="">
			<popBottom ref="popup2">
				<scroll-view class="scroll" scroll-x="true">
					<view v-if="!ifLogin" class="login scroll-view-item" :animation="animationData">
						<view class="login_box ">
							<text class="user my_user">账号</text>
							<input placeholder="请输入账号" class="user_val inp_val" type="text" value="" />
							<text class="paswd my_user">密码</text>
							<input placeholder="请输入密码" class="paswd_val inp_val" type="text" value="" />
						</view>
						<myBtn @myclick="myclick7()" ref='myBtn' :title="'登录'" type="success"></myBtn>
					</view>
					<view v-if="ifLogin" class="login_yes">
						<view class="a-c" style="width: 100%;text-align: center;margin-top: 120rpx;margin-bottom: 186rpx;">
							<myYes :backcolor="'#2AA845'" size="120"></myYes>
						</view>
						<myBtn style="margin-bottom: 76rpx;" @myclick="myclick7()" ref='myBtn' :title="'继续浏览'" type="success"></myBtn>
					</view>
				</scroll-view>
			</popBottom>
		</view>
		<lbPicker v-model="value1" ref="picker" mode="multiSelector" :list="dataArr" :level="3" @change="handleChange"
		 @confirm="handleConfirm" @cancle="handleCancle">
			<!-- 具名插槽 -->
			<text slot="action-center">请选择地址</text>
		</lbPicker>
	</view>
</template>

<script>
	import vue from 'vue'
	import myBtn from '../component/myBtn/myBtn.vue'
	import mySwitch from '../component/mySwitch/mySwitch'
	import myTag from '../component/myTag/myTag'
	import myYes from '../component/myYes/myYes'
	import newMsg from '../component/newMsg/uni-notice-bar'
	import popUp from '../component/popUp/uni-popup.vue'
	import lbPicker from '../component/lbPicker'
	import dataArr from '../component/lbPicker/area-data-min.js'
	import carDetails from '../component/carDetails/carDetails.vue'
	import popBottom from '../component/popBototm/uni-popup.vue'
	export default {
		components: {
			myBtn,
			mySwitch,
			myTag,
			newMsg,
			myYes,
			popUp,
			popBottom,
			lbPicker,
			carDetails
		},
		data() {
			return {
				dataArr: dataArr,
				value1: [],
				title: 'Hello',
				msgShow: false,
				msgTxt: '[通知栏]茶城通官方给你发来一警告信',
				msgTxt2: '[通知栏]茶城通官方给你发来一警告信,茶城通官方给你发来一警告信',
				ifScro: false,
				animationData: {},
				animationData2: {},
				ifLogin: false,
				carList2: {
					icon: {
						name: "/e00",
						color: "#E98A34"
					},
					title: "系统阻塞",
					data: [{
						name:"变速箱油",
						total: "500",
						newNum: "100",
						time: "3",
						oneKm:"6",
						nowKm:'3',
						
					},
					{
						name:"变速箱油",
						total: "500",
						newNum: "120",
						time: "3",
						oneKm:"6",
						nowKm:'3'
					}]
				
				},
				carList: {
					icon: {
						name: "/e00",
						color: "#2AA845"
					},
					title: "系统阻塞",
					data: [{
						name:"变速箱油",
						total: "500",
						newNum: "160",
						time: "3",
						oneKm:"6",
						nowKm:'3',
						backColor:"#2AA845"
					}]

				}

			}
		},
		onShow: function() {
			var animation = uni.createAnimation({
				duration: 400,
				timingFunction: 'ease',
			})
			this.animation = animation
		},
		onLoad() {
			console.log(this.msgTxt2.length, parseInt(this.msgTxt.length) > parseInt(18))
			this.msgTxt2.length > 18 ? this.ifScro = true : this.ifScro = false
		},
		methods: {
			close() {

			},
			//级联
			myclick8() {
				console.log('wwww')
				this.$refs.picker.show()
			},
			handleChange(item) {
				console.log('change::', item)
			},
			handleCancle(item) {

			},
			handleConfirm(item) {
				console.log('confirm::', item.item)
				this.siteLabel = []
				this.arr = []
				this.arr2 = []
				item.item.forEach(ele => {
					this.arr.push(ele.label)
					this.arr2.push(ele.value)
				})

				this.siteLabel = this.arr.join(" - ")
				this.arr2 = this.arr2.join(",")
			},
			myClick() {},
			myclick7() {
				// this.animation.translateX(-100+'%').step()
				// this.animationData = this.animation.export()
			},
			handChan(e) {
				console.log('开关', e)
			},
			myclick6() {
				this.$refs.popup2.open({
					title: '登录',
					// noName: {
					// 	name: "我点错了",
					// 	color: "#CF1D00"
					// },
					// yesName: {
					// 	name: "下一步",
					// 	color: "#2AA845"
					// }
				})
			},
			myclick() {
				this.$refs.popup.open({
					noName: {
						name: "我点错了",
						color: "#CF1D00"
					},
					yesName: {
						name: "下一步",
						color: "#2AA845"
					}
				})
			},
			myclick2() {
				this.$refs.mpopup.open({
					type: 'err',
					content: '发生错误，稍后再试',
					timeout: 2000,
					icon: 'iconcuowu'
				});
			},
			myclick3() {
				this.$refs.mpopup.open({
					type: 'warn',
					content: '警告，没有下次机会',
					timeout: 2000,
					icon: 'icontx'
				});
			},
			myclick4() {
				this.$refs.mpopup.open({
					type: 'info',
					content: '请选择收货地址',
					timeout: 2000,
					icon: 'icon-xin'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login_yes {}

	.login {
		padding-bottom: 76rpx;
		background-color: #F1F1F1;
	}

	.login_box {
		display: flex;
		flex-direction: column;
		margin-bottom: 100rpx;
		height: 100%;


		.my_user {
			padding: 34rpx 0;
			padding-left: 20rpx;
		}

		.inp_val {
			height: 100rpx;
			background-color: #fff;
			padding-left: 20rpx;
		}
	}

	.my_button {
		position: relative;
		z-index: 1;
		border: none;
		outline: none;
		padding: 0.5em 1em;
		color: white;
		background-color: #1890ff;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
